<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { addShippingPost, delShippingPost, updateShippingPost } from '@/services/goods.ts';
import { informationGet } from '@/services/index.ts';

const $route = useRoute();
const $router = useRouter();
const formRef = ref();
const editAddressData = reactive({
  shippingPerson: '',
  shippingMobile: '',
  shippingAddressDetail: '',
  checked: false,
});
const rules = reactive({
  shippingPerson: [{ required: true, message: '收货人不能为空' }],
  shippingMobile: [{ required: true, message: '手机号不能为空' }],
  shippingAddressDetail: [{ required: true, message: '详细地址不能为空' }],
});

const onSaveClick = async () => {
  try {
    await formRef.value.validate();
    let params = {};
    const baseParams = {
      shippingPerson: editAddressData.shippingPerson,
      shippingMobile: editAddressData.shippingMobile,
      shippingAddressDetail: editAddressData.shippingAddressDetail,
      defaultFlag: editAddressData.checked ? 'YES' : 'NO',
    };
    params = $route.query.id ? { ...baseParams, customerShippingId: $route.query.id } : baseParams;
    const { message, err } = $route.query.id
      ? await updateShippingPost(params)
      : await addShippingPost(params);
    if (err) {
      showToast(err);
      return;
    }
    showToast(message);
    $router.push({ path: '/address', replace: true });
  } catch (errors) {
    console.log('表单验证失败', errors);
  }
};
const onDelClick = async () => {
  const { message, err } = await delShippingPost({
    customerShippingId: $route.query.id,
  });
  if (err) {
    showToast(err);
    return;
  }
  showToast(message);
  $router.push({ path: '/address', replace: true });
};

const loadData = async () => {
  const { data, err } = await informationGet();
  if (err) {
    showToast(err);
    return;
  }
  const selectAddress = data.customerShippingDetailList.find(
    (item: any) => item.customerShippingId == $route.query.id,
  );
  editAddressData.shippingPerson = selectAddress.shippingPerson;
  editAddressData.shippingMobile = selectAddress.shippingMobile;
  editAddressData.shippingAddressDetail = selectAddress.shippingAddressDetail;
  editAddressData.checked = selectAddress.defaultFlag === 'YES';
};
onMounted(() => {
  if ($route.query.id) {
    document.title = '编辑地址';
    loadData();
  }
});
</script>

<template>
  <div class="edit_address_container">
    <van-form required="auto" :model="editAddressData" :rules="rules" ref="formRef">
      <van-field
        label="收货人"
        v-model="editAddressData.shippingPerson"
        :rules="rules.shippingPerson"
        name="shippingPerson"
        placeholder="请输收货人"
        clearable
      />

      <van-field
        label="联系电话"
        v-model="editAddressData.shippingMobile"
        :rules="rules.shippingMobile"
        name="shippingMobile"
        clearable
        placeholder="请输入联系电话"
      ></van-field>
      <van-field
        label="详细地址"
        v-model="editAddressData.shippingAddressDetail"
        :rules="rules.shippingAddressDetail"
        name="shippingAddressDetail"
        clearable
        placeholder="请输入详细地址"
      ></van-field>
    </van-form>
    <div class="isDefault">
      <div class="isDefault_text">设置默认地址</div>
      <van-switch
        v-model="editAddressData.checked"
        active-color="#00BA9F"
        inactive-color="#dcdee0"
      />
    </div>
    <div :class="{ address_button: true, address_edit_button: $route.query.id }">
      <van-button v-if="$route.query.id" @click="onDelClick" plain round color="#E89000" block>
        删除收货地址
      </van-button>
      <van-button @click="onSaveClick" round color="#E89000" block>保存</van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.edit_address_container {
  width: 100%;
  min-height: 100vh;
  background: #f6f6f6;

  .isDefault {
    margin-top: 8px;
    width: 100%;
    height: 55px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;

    .isDefault_text {
      font-size: 15px;
      font-weight: 400;
      color: #454545;
    }
  }

  .address_button {
    width: 100%;
    height: 72px;
    padding: 0 24px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;

    .van-button--round {
      height: 40px;
      margin: 8px 0;
    }
  }

  .address_edit_button {
    .van-button--block {
      width: 160px;
      height: 40px;
    }
  }
}
</style>
